<template>
  <dv-border-box-7 id="board-second-left-charts">
    <div class="second-left-charts">实时消息</div>
    <hr>
    <div class="board-second-left-scroll-board">
      <dv-scroll-board :config="config" />
    </div>
  </dv-border-box-7>
</template>

<script>
import Axios from "axios";

export default {
  name: "ScrollBoard",
  data() {
    return {
      config: {
        header: ["时间", "消息类别", "消息内容"],
        data: [["2022/06/01", "任务提醒", "请打开电脑"]],
        index: true,
        columnWidth: [fontSize(8), fontSize(20), fontSize(20), fontSize(25)],
        align: ['center'],
        rowNum: 7,
        indexHeader:"序号",
        headerBGC: "#1981f6",
        headerHeight: fontSize(5),
        oddRowBGC: "rgba(0, 44, 81, 0.8)",
        evenRowBGC: "rgba(10, 29, 50, 0.8)",

      },
    };
  },
  methods: {
    UpdateData() {
       // const { randomExtend } = this;
           var _this=this;
             var data = "";
      var Array = [];
      //var url = this.$baseUrl + "";
       Axios.get("").then((response) => (data = response.data));
       for (var i in data) {
        Array.push(Object.values(data[i]));
      }


          _this.config = {
            header: ["时间", "消息类别", "消息内容"],
            data: Array,
            index: true,
            columnWidth: [
              fontSize(5),
              fontSize(15),
              fontSize(10),
              fontSize(25),
            ],
            align: ['center'],
            rowNum: 7,
            headerBGC: "#1981f6",
            headerHeight: fontSize(5),
            oddRowBGC: "rgba(0, 44, 81, 0.8)",
            evenRowBGC: "rgba(10, 29, 50, 0.8)",
          }

    },
  },
  mounted() {
    // const { UpdateData } = this;

    // this.UpdateData();

    // setInterval(this.UpdateData, 1000);
  },
};
export function fontSize(res) {
  let docEl = document.documentElement,
    clientWidth =
      window.innerWidth ||
      document.documentElement.clientWidth ||
      document.body.clientWidth;
  if (!clientWidth) return;
  let fontSize = 100 * (clientWidth / 23329);
  return res * fontSize;
}
</script>


<style lang="less">
#board-second-left-charts {
  width: 32%;
  height: 100%;
  background-color: rgba(6, 30, 93, 0.5);
  border-top: 2px solid rgba(1, 153, 209, 0.5);
  box-sizing: border-box;
  margin: 20px;
  .second-left-charts {
    font-size: 20px;
    display: flex;
    font-weight: bold;
    color: white;
    justify-content: center;
    align-items: center;
    background-color: #1981F6;
  }
  .board-second-left-scroll-board {
    width: 100%;
    height: 100%;
  }
}
</style>
